<template>
    <div :class="classname" id="page1Echart2"></div>
</template>

<script>
export default {
    name: 'page1Echart2',
    props: {
        classname:[String],
        photovoltaicCurveData:[Object,Array],
    },
    data: function () {
        return {
            photovoltaicCurveDataNew: {}
        }
    },
    methods: {
        myEcharts(){
            var _this = this.$echarts;
            var myChart = _this.init(document.getElementById('page1Echart2'));
            //配置图表
            var option = {
                legend: {},
                grid: {
                    left: '5%',
                    top: '15%',
                    right: '8%',
                    bottom: '0%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        show: false,
                        boundaryGap: false,
                        axisTick: { show: false },
                        splitLine: { show: false },
                        axisLine: { lineStyle: { color: 'rgba(204, 204, 204, .24)' } },
                        axisLabel: { textStyle: { fontSize: 12, color: 'rgba(255, 255, 255, .8)' } },
                        data: this.photovoltaicCurveDataNew.xData
                    },
                    {
                        type: 'category',
                        position: 'bottom',
                        boundaryGap: false,
                        axisTick: { show: false },
                        splitLine: { show: false },
                        axisLine: { lineStyle: { color: 'rgba(204, 204, 204, .24)' } },
                        axisLabel: { textStyle: { fontSize: 12, color: 'rgba(255, 255, 255, .8)' } },
                        data:  this.photovoltaicCurveDataNew.xData
                    },
                ],
                yAxis: [
                    {
                        name: '',
                        axisTick: { show: false },
                        splitLine: { lineStyle: { color: 'rgba(255, 255, 255, .1)', type: 'dashed' } },
                        axisLine: { show: false },
                        axisLabel: { 
                            textStyle: {
                                fontSize: 12,
                                color: 'rgba(255, 255, 255, .8)'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '',
                        type: 'line',
                        smooth: true,
                        symbol: 'image://'+require('@/assets/images/icon-7.png'),
                        symbolSize: 80,
                        showSymbol: false,
                        lineStyle: {
                            width: 2,
                            color: '#3FFFFF',
                            shadowBlur: 8,
                        },
                        areaStyle: {
                            origin: 'start',
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(60, 227, 228, .8)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(60, 227, 228, 0)'
                                    }
                                ],
                                global: false
                            }
                        },
                        data: this.photovoltaicCurveDataNew.result,
                    }
                ]
            };
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize()
            })
        }
    },
    mounted(){},
    watch: {
        photovoltaicCurveData(newData) {
            this.photovoltaicCurveDataNew = newData
            this.myEcharts()
        }
    }
}
</script>

<style>
.box-tooltip-page1Chart2{
    position: absolute;
    padding: 0 8px !important;
    border: 1px solid #00DAFC !important;
    background: rgba(10,76,86,0.6) !important;
    font-size: 16px !important;
    color: #FFFFFF !important;
    line-height: 36px !important;
    border-radius: 0 !important;
    display: none;
}
.box-tooltip-page1Chart2::before{
    margin-top: -3.5px;
    content: '';
    position: absolute;
    left: -5px;
    top: 50%;
    width: 5px;
    height: 7px;
    background: url(~@/assets/images/icon-8.png) no-repeat 100% 100%;
}
</style>